<template>
    <div class="form-data">
        <h2>添加分类</h2>
        <el-form label-width="80px">
            <el-form-item label="分类名称">
                <el-input v-model="formData.title" placeholder="分类名称" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="分类层次">
                <el-cascader
                        :options="options"
                        v-model="formData.value"
                        :disabled="isEdit"
                        >
                </el-cascader>
            </el-form-item>
            <el-button type="primary" @click="submit" class="btn">完成</el-button>
        </el-form>
    </div>
</template>

<script>
    import { sendwithpost } from "../../../../network/profile";

    export default {
        name: "TypeForm",
        props: {
            formData: {
                type: Object,
                default: {}
            },
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                options: [
                {
                    value: 1000,
                    label: '婴儿推车',
                },
                {
                    value: 2000,
                    label: '安全座椅',
                },
                {
                    value: 3000,
                    label: '童床/床品',
                },
                {
                    value: 4000,
                    label: '哺喂餐椅',
                },
                {
                    value: 5000,
                    label: '清洁洗护',
                },
                {
                    value: 6000,
                    label: '湿巾/纸尿裤',
                },
                {
                    value: 7000,
                    label: '妈妈用品',
                },
                {
                    value: 8000,
                    label: '童车玩具',
                },
                {
                    value: 9000,
                    label: '童装内衣',
                }
            ],
            }
        },
        methods: {
            submit() {
                if (this.formData.title === '' || this.formData.value.length === 0) {
                    console.log(this.formData.label, this.formData.type.length)
                  this.$message({
                      showClose: true,
                      message: '类别名称或类别层次不能为空！',
                      type: "error"
                  })
                    return
                } else {
                    if (this.isEdit) {
                        sendwithpost({
                            url: '/edittype',
                            data: this.formData
                        })
                            .then(rer=> {
                                if (rer.data.res_code == 2) {
                                    this.$message({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                    this.$store.dispatch('getGoodsType');
                                    this.$emit('reset')
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: '修改失败',
                                        type: 'error'
                                    })
                                }
                            })
                    } else {
                        this.options.find(item=>{
                            if (item.value == this.formData.value[0]) {
                                this.$set(this.formData, 'label', item.label)
                            }
                        })
                        sendwithpost({
                            url: '/addtype',
                            data: this.formData
                        })
                            .then(res=>{
                                if (res.data.res_code === 2) {
                                    this.$message({
                                        showClose: true,
                                        message: '添加成功！',
                                        type: "success"
                                    })
                                    this.$store.dispatch('getGoodsType');
                                    this.$emit('reset')
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: '添加失败！',
                                        type: "errorw"
                                    })
                                }
                            })
                    }

                }
            },

        }
    }
</script>

<style scoped>
    h2 {
        text-align: center  ;
    }
    .form-data {
        width: 500px;
        padding: 50px;
        position: relative;
        background-color: #fff;
        border-radius: 10px;
    }
    .btn {
        position: absolute;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
    }
</style>